While we already have a pull request (PR) for full-site editing (FSE) support by @strarsis (#141), this PR further enhances these modifications and now supports hybrid templates (Blade-PHP and FSE block templates, currently with priority given to the latter).

Requirements theme

To enable FSE support, the theme (sage) requires some modifications:

1. Since we use wp_is_block_theme() to check for FSE themes when altering the theme hierarchy, templates/index.html needs to exist.
2. Currently sage removes theme support for FSE - we need to remove / comment out this line.
3. Because the generated CSS for blocks will be created in wp_head() action hook, the current position of the view(...)->render() method is too late and would result in empty styles for rendered blocks. Therefor, we need to call it prior to wp_head(), store it in a temporary variable and echo it later.

Test this PR

Optionally create a new Bedrock project

composer create-project roots/bedrock

Use / require acorn fork and setup (minimal) prepared sage theme

# Require PR / fork
composer config repositories.acorn-fse vcs https://github.com/dsturm/acorn
composer require roots/acorn:dev-fse
# Clone new (sage) theme
cd web/app/themes
git clone -b fse https://github.com/dsturm/sage sage-fse
cd sage-fse
# Build
composer i -o && yarn && yarn build
# Activate theme
wp theme activate sage-fse

Ideas

To use block patterns like header or footer in blade templates / views, I wrote two directives which are currently located in my prepared sage fork, but should be located in roots/acorn:

@blocktemplate('template-part')

This will render the specified block part (i.e. header) and fallback, if FSE is not enabled.

<header class="banner wp-block-template-part site-header">
  @blocktemplate('header')
  <a class="brand" href="{{ home_url('/') }}">
    {!! $siteName !!}
  </a>

  @if (has_nav_menu('primary_navigation'))
    <nav class="nav-primary" aria-label="{{ wp_get_nav_menu_name('primary_navigation') }}">
      {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav', 'echo' => false]) !!}
    </nav>
  @endif
  @endblocktemplate
</header>

@parseblocks

If FSE is supported, this will render all blocks.

@parseblocks
<!-- wp:site-title {"textAlign":"center"} /-->
<!-- wp:site-tagline {"textAlign":"center"} /-->
@endparseblocks

Questions

1. Which template type should be given priority: FSE or Blade?
2. Do we need configuration for FSE options (in config/view.php) - like enabling/disabling FSE or setting template hierarchy priority?
3. Should we include the directives into roots/acorn?
4. How should we handle the FSE requirements. Should we have a fse:init command for acorn which will publish stubs and ensure we do not have remove_theme_support('block-templates')?

Useful resources

• https://discourse.roots.io/t/full-site-editing-fse-frontend-doesnt-load-template/21574/27
• https://fullsiteediting.com/lessons/how-to-use-php-templates-in-block-themes/#h-making-sure-that-wordpress-loads-the-block-css